<template>
  <div class="song-comment">
    <header>
      <div class="h_top">
        <div class="z">
          <!-- 返回 -->
          <span class="iconfont icon-xiangzuojiantou" @click.stop="$emit('showComment', false)"></span>
          <p>评论({{ comNum }})</p>
        </div>

        <span class="iconfont icon-fenxiang"></span>
      </div>
      <div class="h_bottom">
        <!-- 头像 -->
        <div class="img_h">
          <img :src="music.picUrl || music.song.album.picUrl" />
          <!-- :style="{ animationPlayState: playState ? 'running' : 'paused' }" -->
        </div>
        <!-- 文字 -->
        <div class="text_h">
          <span>
            <p>{{ music.name }}</p>
            <em v-for="item in music.song.alias" :key="item.id">({{ item }})</em>
          </span>
        </div>
      </div>
    </header>

    <div class="main">
      <h3>评论区</h3>
      <ul>
        <li v-for="item in commentArr" :key="item.commentId">
          <div class="top">
            <!-- 左边 -->
            <div class="t_l">
              <!-- 用户头像 -->
              <img :src="item.user.avatarUrl" />
              <div class="name">
                <!-- 用户名 -->
                <p>
                  {{ item.user.nickname }}
                </p>
                <span>
                  {{ item.timeStr }}
                </span>
              </div>
            </div>

            <!-- 右边点赞 -->
            <div class="t_r">
              <!-- {{ item.likedCount }} -->
              {{ item.flag ? item.likedCount + 1 : item.likedCount}}
              <span :class="['iconfont', 'icon-dianzan', { 'red': item.flag }]"
                @click.stop="item.flag = !item.flag"></span>
            </div>
          </div>

          <div class="bottom">
            <p>
              {{ item.content }}
            </p>
          </div>
        </li>
        <load-animate v-if="isloading"></load-animate>
        <div v-else class="loadmore" @click.stop="loadMore" ref="loadmore">
          加载更多...
        </div>
      </ul>
    </div>
  </div>
</template>

<script>
/* /comment/music?id=186016&limit=1   获取歌曲评论 */
export default {
  props: {
    music: {
      //当前播放音乐
      type: Object,
      default: () => {
        return null;
      },
    },
  },
  data() {
    return {
      page: 1, //页数
      commentArr: [], //评论
      comNum: 0, //评论数
      num: 0,
      isloading: false,
    };
  },
  created() {
    this.getComment();
  },
  mounted() {
    this.getComment();
  },

  methods: {
    async getComment(offset = 20) {
      await this.axios
        .get(`/comment/music?id=${this.music.id}&limit=${offset}`)
        .then((re) => {
          console.log("评论===>", re);
          this.commentArr = re.hotComments.map(v => {
            v.flag = false;
            return v
          });
          this.comNum = re.total;
          this.isloading = false;
        });
    },

    loadMore() {
      this.isloading = true;
      this.page++;
      let offset = 10 * this.page;
      this.getComment(offset);
    },
  },
  computed: {},
  filters: {},
  watch: {},
};
</script>

<style lang="scss" scoped>
.song-comment {
  position: fixed;
  z-index: 120;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  background-color: #fff;

  header {
    width: 100%;
    height: 100px;
    position: fixed;

    .h_top {
      width: 100vw;
      height: 40px;
      display: flex;
      justify-content: space-between;
      padding: 2px 10px;
      text-align: center;
      line-height: 40px;

      .z {
        display: flex;
        font-size: 16px;

        .icon-xiangzuojiantou {
          font-size: 26px;
          display: block;
          margin-right: 10px;
        }
      }

      .icon-fenxiang {
        font-size: 20px;
      }
    }

    .h_bottom {
      width: 100%;
      height: 60px;
      padding: 0 10px;
      display: flex;
      align-items: center;

      .img_h {
        height: 45px;
        width: 45px;
        border-radius: 50%;
        // border: 1px solid black;
        background-color: #090909;
        display: flex;
        justify-content: center;
        align-items: center;

        // overflow: auto;
        img {
          width: 35px;
          height: 35px;
          border-radius: 50%;
          animation: roll 4s linear infinite;
        }
      }

      .text_h {
        margin-left: 20px;
        line-height: 60px;

        span {
          display: flex;
          font-size: 12px;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }

  .main {
    width: 100%;
    margin-top: 100px;
    padding: 10px 10px;

    h3 {
      line-height: 50px;
    }

    ul {
      width: 100%;
      height: 76vh;
      display: flex;
      flex-direction: column;
      overflow: auto;

      // justify-content: space-around;
      // align-items: center;
      li {
        width: 100%;
        line-height: 100px;
        display: flex;
        flex-direction: column;

        &:last-child {
          background-color: red;
          margin-bottom: 300px;
        }

        .top {
          width: 100vw;
          height: 50px;
          margin: 10px 5px;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .t_l {
            display: flex;

            /* 头像 */
            img {
              width: 30px;
              height: 30px;
              border-radius: 50%;
            }

            /* 用户名 */
            .name {
              height: 50px;
              display: flex;
              flex-direction: column;
              padding: 0 10px;

              p {
                height: 25px;
                line-height: 25px;
                font-size: 14px;
              }

              span {
                height: 25px;
                line-height: 25px;
                font-size: 12px;
                color: #ccc;
              }
            }
          }

          .t_r {
            font-size: 13px;

            .icon-dianzan {
              margin-right: 30px;
              line-height: 50px;
            }

            .red {
              color: red;
              font-weight: bold;
            }
          }
        }

        /* 评论内容 */
        .bottom {
          width: 100%;
          border-bottom: 1px solid #ccc;

          p {
            width: 100%;
            line-height: 30px;
            padding: 0 10px 0 45px;
            margin-bottom: 10px;
          }
        }
      }

      .loadmore {
        width: 100%;
        line-height: 50px;
        text-align: center;
      }
    }
  }

  @keyframes roll {
    from {
      transform: rotate(0deg);
    }

    to {
      transform: rotate(360deg);
    }
  }
}
</style>